<template>
  <div class="main">
    <iframe
      class="bg"
      frameborder="0"
      scrolling="no"
      :src="background"
    ></iframe>
    <div class="join">
      <div class="intro">
        <light-text />
      </div>
      <div style="display:flex">
        <el-input
          size="large"
          v-model="meetingNumber"
          placeholder="请输入您悉知的视频会议ID"
          @input="setNum"
          @keyup.enter.native="handleJoin"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
          ></i>
        </el-input>
        <light-button
          class="join-button"
          :loading="joinLoading"
          icon="el-icon-video-camera-solid"
          @click="handleJoin"
        >
          加入会议
        </light-button>
      </div>
    </div>
  </div>
</template>

<script>
import join from '@/mixin/join.js'
export default {
  name: 'Join',
  mixins: [join],
  data () {
    return {
      // 背景图
      background: '/html/wave.html',
      // 新手指引弹框
      introDialogVisible: false
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 420px;
  width: 100%;
  min-width: $global_width;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url("/images/wave.jpg") no-repeat;
  .switch {
    position: absolute;
    bottom: 0;
    width: $global_width;
    text-align: right;
    z-index: 2;
    color: $color1;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .bg {
    position: absolute;
    width: 100%;
    min-width: $global_width;
    height: 100%;
    top: 0;
    left: 0;
  }
  .join {
    opacity: 0.9;
    width: 50%;
    min-width: 800px;
    margin-top: -70px;
    .intro {
      margin-bottom: 10px;
    }
    .join-button {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    ::v-deep .el-input__inner {
      height: 65px;
      font-size: 25px;
      padding-left: 65px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    ::v-deep .el-input__icon {
      line-height: 65px;
      font-size: 22px;
      margin-left: 15px;
    }
  }
}
</style>
